<!DOCTYPE html>
<html>
<head>
<title>LightBox</title>
<style>
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.lightbox {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
}
#closeButton {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="openLightBox">Open LightBox</button>
<div class="overlay" id="overlay">
<div class="lightbox" id="lightbox">
<h1>LightBox Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button id="closeButton">Close</button>
</div>
</div>
<script>
const openButton = document.getElementById('openLightBox');
const overlay = document.getElementById('overlay');
const lightbox = document.getElementById('lightbox');
const closeButton = document.getElementById('closeButton');
openButton.addEventListener('click', () => {
overlay.style.display = 'block';
lightbox.style.display = 'block';
});
closeButton.addEventListener('click', () => {
overlay.style.display = 'none';
lightbox.style.display = 'none';
});
</script>
</body>
</html>